<template>
  <div style="padding:10px 0 0 10px;font-size:14px;color:rgb(85, 84, 84);">
    <div class="title">服务预警信息</div>
    <div ref="pie" style="height:80%;padding-left: 20px;box-sizing:border-box;margin-right: -100px;"></div>
  </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {
      data: [{ type: 'OK', value: 100 },
      { type: 'WARN', value: 50 },
      { type: 'CRIT', value: 20 }]
    }
  },
  methods: {
    loadPie() {
      const pattern = ({ type }) => {
        if (type === '分类一') {
          return {
            type: 'line',
            cfg: {
              lineWidth: 6,
              spacing: 5,
            },
          };
        } else if (type === '分类三') {
          return {
            type: 'dot',
            cfg: {
              size: 10,
            },
          };
        }
        return;
      };
      const piePlot = new Pie(this.$refs.pie, {
        data: this.data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.7,
        innerRadius: 0.6,
        label: {
          type: 'outer',
          offset: '100%',
          content: ({ value, type }) => `${type}: ${value}`,
          style: {
            fontSize: 14,
          },
        },
        legend: {
          position: 'left',
          itemName: {
            formatter: (text, item) => {
              const value = this.data.find(d => d.type === item.value)?.value || 0;
              return `${text}: ${value}`; // 显示类型和对应的值
            },
          },
        },
        interactions: [{type:'line'}],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            },
            content: '',
          },
        },
        pattern,
      });

      piePlot.update({
        theme: {
          styleSheet: {
            brandColor: '#014c63',
            paletteQualitative10: [
              'rgb(115, 160, 250)',
              '#FF6836',
              'rgb(93, 112, 146)',
            ],
          },
        },
      });
      piePlot.render();
    }
  },
  mounted() {
    this.loadPie()
  }
}
</script>